<template>
  <el-color-picker
    v-model="color"
    :predefine="predefineColors"
    @change="themeChange"
    color-format="hex"
    :show-alpha="false"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useSysStore } from '@/stores/sys'
import { onMounted } from 'vue'

const store = useSysStore()

const color = ref('')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

const themeChange = () => {
  store.changeThemeColor(color.value)
  // document.documentElement.style.setProperty(`--el-color-primary`, color.value)

  // // 颜色加深或变浅
  // for (let i = 1; i <= 9; i++) {
  //   document.documentElement.style.setProperty(
  //     `--el-color-primary-light-${i}`,
  //     getLightColor(color.value, i / 10),
  //   )
  // }
}

onMounted(() => {
  color.value = store.themeColor
  themeChange()
})
</script>

<style lang="scss">
.el-color-picker {
  @include flex-align-c();
}
</style>
